<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        header{
            width: 100%;
            height: 80px;
            background: tomato;
            top: 0px;
            /*fixed 固定定位*/
            position: fixed;
            /*将当前元素置于第二层*/
            z-index: 2;

        }

        footer{
            width: 100%;
            height: 50px;
            background: cyan;
            bottom: 0px;
            /*固定位置*/
            position: fixed;
        }

        .main{
            width: 100%;
            height: 1800px;
            background: antiquewhite;
            position: absolute;
            top: 80px;
        }

    </style>


</head>
<body>

<header>
    我是头部内容，我是固定到定位到头部
</header>

<section class="main">
    我是中间内容
</section>

<footer>
    我是底部内容，我是固定到定位到底部
</footer>

</body>
</html>